<template>
  <div class="cust_table">
    <Button
      type="primary"
      style="margin-bottom: 10px"
      @click="addField"
      :disabled="disabled"
      >新增字段</Button
    >
    <Table
      :columns="columns"
      :data-source="fieldsData"
      :rowKey="returnRowKey"
      :pagination="false"
    >
      <template slot="fieldName" slot-scope="text, record, index">
        <Input
          :disabled="disabled"
          :defaultValue="text"
          placeholder="请输入字段名称"
          @change="(e) => handleChange('fieldName', e.target.value, index)"
        />
      </template>
      <template slot="fieldId" slot-scope="text, record, index">
        <Input
          :disabled="disabled"
          :defaultValue="text"
          placeholder="请输入字段"
          @change="(e) => handleChange('fieldId', e.target.value, index)"
        />
      </template>

      <template slot="action" slot-scope="text, record">
        <Button type="link" @click="deleteField(record.id)" :disabled="disabled"
          >删除</Button
        >
      </template>
    </Table>
  </div>
</template>

<script>
import Button from "ant-design-vue/lib/button/button";
import Input from "ant-design-vue/lib/input";
import Table from "ant-design-vue/lib/table";

const columns = [
  {
    title: "排序",
    width: "10%",
    customRender: function (t, r, i) {
      return i + 1;
    },
  },
  {
    title: "字段名称",
    dataIndex: "fieldName",
    width: "40%",
    scopedSlots: { customRender: "fieldName" },
  },
  {
    title: "字段",
    dataIndex: "fieldId",
    width: "40%",
    scopedSlots: { customRender: "fieldId" },
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    width: "10%",
    scopedSlots: { customRender: "action" },
  },
];
function guid() {
  function S4() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }
  return (
    S4() +
    S4() +
    "-" +
    S4() +
    "-" +
    S4() +
    "-" +
    S4() +
    "-" +
    S4() +
    S4() +
    S4()
  );
}
export default {
  components: {
    Button,
    Input,
    Table,
  },
  props: {
    data: Array,
    editType: Number,
  },
  data() {
    return {
      columns,
      fieldsData: this.editType === 1 ? [] : this.data,
    };
  },
  computed: {
    disabled() {
      return this.editType === 3;
    },
  },
  methods: {
    returnRowKey(record) {
      return record.id;
    },
    getEmptyTableItem() {
      let id = guid();
      return {
        fieldName: "",
        fieldId: "",
        id,
      };
    },

    addField() {
      this.fieldsData.push(this.getEmptyTableItem());
    },

    getData() {
      return JSON.parse(JSON.stringify(this.fieldsData));
    },
    deleteField(id) {
      let copyData = [...this.fieldsData];
      this.fieldsData = copyData.filter((item) => id !== item.id);
    },
    handleChange(key, value, index) {
      let actionObj = this.fieldsData[index];
      actionObj[key] = value;
    },
  },
};
</script>

<style scoped>
.cust_table {
  width: 800px;
  padding: 16px;
  background: #fff;
  margin: 0 auto;
  border-radius: 5px;
}
</style>